<template>
  <div>
    <el-card class="box-card">
      <el-table :data="tableData"
                style="width: 75%">
        <el-table-column
          prop="index"
          label="订单号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="cusNum"
          label="顾客号"
          width="140">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="140">
        </el-table-column>
        <el-table-column
          prop="money"
          label="单价"
          width="140">
        </el-table-column>
        <el-table-column
          prop="date"
          label="下单日期"
          width="140">
        </el-table-column>
        <el-table-column
          prop="transported"
          label="运费"
          width="140">
        </el-table-column>
        <el-table-column
          prop="allFee"
          label="总金额"
          width="140">
        </el-table-column>
        <el-table-column
          prop="allNum"
          label="总数量"
          width="140">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template #default="scope">
            <el-button type="primary" @click="updateEvent(scope.$index,scope.row)">修改</el-button>
            <el-button type="danger" @click="deleteEvent(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改" width="30%">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="订单号">
            <el-input v-model="form.index"></el-input>
          </el-form-item>
          <el-form-item label="顾客号">
            <el-input v-model="form.cusNum"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="单价">
            <el-input v-model="form.money"></el-input>
          </el-form-item>
          <el-form-item label="下单日期">
            <el-input v-model="form.date"></el-input>
          </el-form-item>
          <el-form-item label="运费">
            <el-input v-model="form.transported"></el-input>
          </el-form-item>
          <el-form-item label="总金额">
            <el-input v-model="form.allFee"></el-input>
          </el-form-item>
          <el-form-item label="总数量">
            <el-input v-model="form.allNum"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="saveEdit">确定</el-button>
        </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      tableData: [{
        index: '1',
        cusNum: '001',
        name: '羽毛球',
        money: '20',
        numbers: '50',
        transported: '10',
        allFee: '200',
        allNum: '20'
      }]
    }
  },
  methods: {
    deleteEvent (index) {
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
          this.tableData.splice(index, 1)
        })
        .catch(() => {})
    },
    updateEvent (index, row) {
      this.idx = index
      this.form = row
      this.editVisible = true
    },
    saveEdit () {
      this.$message.success(`修改第 ${this.idx + 1} 行成功`)
      this.$set(this.tableData, this.idx, this.form)
    }
  }
}
</script>

<style scoped>

</style>
